<template>
  <div class="bg-white rounded-2xl shadow-sm p-8">
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-gray-900 mb-2">个人信息</h1>
      <p class="text-gray-500">完善个人信息，提升账号安全性和可信度</p>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">基本信息</h2>
      <div class="grid grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
          <input v-model="userInfo.name" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">学号</label>
          <input v-model="userInfo.studentId" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">学院</label>
          <input v-model="userInfo.college" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">专业</label>
          <input v-model="userInfo.major" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">联系方式</h2>
      <div class="grid grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
          <input v-model="userInfo.phone" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
          <input v-model="userInfo.email" :disabled="!isEditing" type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">代拿服务信息</h2>
      <div class="grid grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">服务范围</label>
          <input v-model="userInfo.serviceRange" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">常接单时间</label>
          <input v-model="userInfo.serviceTime" :disabled="!isEditing" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" :class="{'bg-gray-50': !isEditing}" />
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">身份认证状态</h2>
      <div class="flex items-center gap-2 text-green-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <span class="font-medium">已认证</span>
      </div>
    </div>

    <div class="flex justify-end gap-4 pt-6 border-t border-gray-200">
      <button v-if="isEditing" @click="cancelEdit" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
      <button v-if="!isEditing" @click="isEditing = true" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">编辑信息</button>
      <button v-if="isEditing" @click="saveEdit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">保存修改</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'CourierProfileInfo',
  data() {
    return {
      isEditing: false,
      userInfo: {
        name: '',
        studentId: '',
        college: '',
        major: '',
        phone: '',
        email: '',
        serviceRange: '',
        serviceTime: ''
      },
      originalUserInfo: {}
    }
  },
  methods: {
    cancelEdit() {
      this.isEditing = false
      this.userInfo = { ...this.originalUserInfo }
    },
    async saveEdit() {
      const userId = localStorage.getItem('userId')
      if (!userId) {
        alert('请先登录')
        return
      }
      try {
        await axios.put(`/api/users/profile/${userId}`, {
          phone: this.userInfo.phone || undefined,
          email: this.userInfo.email || undefined,
          nickname: this.userInfo.name || undefined,
          // order_users 字段（代拿员也可能需要这些信息）
          college: this.userInfo.college || undefined,
          major: this.userInfo.major || undefined,
          student_id: this.userInfo.studentId || undefined,
          // courier_users 字段
          service_range: this.userInfo.serviceRange || undefined,
          service_time: this.userInfo.serviceTime || undefined
        })
        this.originalUserInfo = { ...this.userInfo }
        this.isEditing = false
        alert('信息保存成功！')
      } catch (e) {
        console.error('保存失败', e)
        alert('保存失败，请稍后再试')
      }
    },
    async loadProfile() {
      const userId = localStorage.getItem('userId')
      if (!userId) return
      try {
        const { data } = await axios.get(`/api/users/profile/${userId}`)
        const root = (data && data.data) || {}
        const u = root.user || {}
        const ou = root.order_user || {}
        const cu = root.courier_user || {}

        // 从 users 表加载基础信息
        this.userInfo.name = u.nickname || ''
        this.userInfo.phone = u.phone || ''
        this.userInfo.email = u.email || ''

        // 从 order_users 表加载扩展信息（如果有）
        this.userInfo.college = ou.college || ''
        this.userInfo.major = ou.major || ''
        this.userInfo.studentId = ou.student_id || ''

        // 从 courier_users 表加载代拿员扩展信息
        this.userInfo.serviceRange = cu.service_range || ''
        this.userInfo.serviceTime = cu.service_time || ''

        this.originalUserInfo = { ...this.userInfo }
      } catch (e) {
        console.error('加载资料失败', e)
      }
    }
  },
  mounted() {
    this.loadProfile()
  }
}
</script>
